<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body,
        html {height: 100%;margin: 0;font-family: Arial, Helvetica, sans-serif;}
        * {box-sizing: border-box;}
        .bg-image {
            /* Full height */
            height: 50%;
            /* Center and scale the image nicely */
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }

        .img1 {background-image: url("../img/Tesla\ \(2\).jpeg");}
        .img2 {background-image: url("../img/Tesla\ \(3\).jpeg");}
        .img3 {background-image: url("../img/Tesla\ \(4\).jpeg");}
        .img4 {background-image: url("../img/Tesla\ \(5\).jpeg");}
        .img5 {background-image: url("../img/Tesla\ \(6\).jpeg");}
        .img6 {background-image: url("../img/Tesla\ \(7\).jpeg");}
        
        .bg-text {
            background-color: rgb(0, 0, 0);
            /* Fallback color */
            background-color: rgba(0, 0, 0, 0.4);
            /* Black w/opacity/see-through */
            color: white;
            font-weight: bold;
            font-size: 80px;
            border: 20px solid #f1f1f1;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;
            width: 300px;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>

<body>

    <xmp style="font-size: 22px; font-weight: bolder;  margin-bottom: 66px;  color: black;  font-family: '微软雅黑';">
        必知必会  

        Change Background on Scroll 效果实现:

        <div class="bg-image img1"></div>
        <div class="bg-image img2"></div>
        <div class="bg-image img3"></div>
        <div class="bg-image img4"></div>
        <div class="bg-image img5"></div>
        <div class="bg-image img6"></div>

        .img1 {background-image: url("../img/Tesla\ \(2\).jpeg");}
        .img2 {background-image: url("../img/Tesla\ \(3\).jpeg");}
        .img3 {background-image: url("../img/Tesla\ \(4\).jpeg");}
        .img4 {background-image: url("../img/Tesla\ \(5\).jpeg");}
        .img5 {background-image: url("../img/Tesla\ \(6\).jpeg");}
        .img6 {background-image: url("../img/Tesla\ \(7\).jpeg");}
        
        给文字部分添加 fixed 属性:
        .bg-text {
            background-color: rgb(0, 0, 0);
            background-color: rgba(0, 0, 0, 0.4);
            color: white;
            font-weight: bold;
            font-size: 80px;
            border: 20px solid #f1f1f1;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;
            width: 300px;
            padding: 20px;
            text-align: center;
        }
    </xmp>

    <div class="bg-image img1"></div>
    <div class="bg-image img2"></div>
    <div class="bg-image img3"></div>
    <div class="bg-image img4"></div>
    <div class="bg-image img5"></div>
    <div class="bg-image img6"></div>

    
    <div class="bg-text">TEXT</div>


</body>
</html>